<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .aaa {
        width: 450px;
        height: 285px;
        margin: 100px 500px;
        position: relative;
        overflow: hidden;
    }

    .aaa .L {
        width: 20px;
        height: 40px;
        line-height: 40px;
        border-radius: 0 20px 20px 0;
        background-color: #fff;
        opacity: 0.5;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        text-align: center;
        cursor: pointer;
        z-index: 5;
        display: none;
    }

    .aaa .R {
        width: 20px;
        height: 40px;
        line-height: 40px;
        border-radius: 20px 0 0 20px;
        background-color: #fff;
        opacity: 0.5;
        position: absolute;
        left: 430px;
        top: 50%;
        transform: translateY(-50%);
        text-align: center;
        cursor: pointer;
        z-index: 5;
        display: none;
    }

    .aaa .bbb {
        /* 自动化添加 */
        /* width: 2600px; */
        height: 100%;
        overflow: hidden;
        position: relative;
    }

    .aaa .bbb li {
        float: left;
        width: 450px;
        height: 285px;
    }

    .aaa .ccc {
        position: absolute;
        left: 50%;
        bottom: 15px;
        transform: translate(-50%);
    }

    .aaa .ccc li {
        float: left;
        width: 10px;
        height: 10px;
        margin-left: 10px;
        border-radius: 10px;
        background-color: #fff;
        opacity: 0.5;
    }

    .aaa .ccc .actColor {
        background-color: blueviolet;
    }
</style>

<body>
    <div class="aaa">
        <ul class="bbb">
            <li><img src="imgs/001.jpg" alt=""></li>
            <li><img src="imgs/002.jpg" alt=""></li>
            <li><img src="imgs/003.jpg" alt=""></li>
            <li><img src="imgs/004.jpg" alt=""></li>
            <!-- <li><img src="imgs/001.jpg" alt=""></li> -->
        </ul>
        <ol class="ccc">
            <!-- <li></li>
            <li></li>
            <li></li>
            <li></li> -->
        </ol>
        <span class="R">&gt;</span>
        <span class="L">&it;</span>
    </div>
    <script src="js/animation.js"></script>
    <script>

        var aaa = document.querySelector('.aaa')
        var bbb = document.querySelector('.bbb')
        var ccc = document.querySelector('.ccc')
        var lis = document.querySelectorAll('.bbb>li')
        var L = document.querySelector('.L')
        var R = document.querySelector('.R')

        aaa.onmouseenter = function () {
            L.style.display = 'block'
            R.style.display = 'block'
            clearInterval(timer)
        }
        aaa.onmouseleave = function () {
            L.style.display = 'none'
            R.style.display = 'none'
            timer = setInterval(function () {
                R.onclick()
            }, 2000)

        }



        // 复制 第一张图片 到最后
        bbb.appendChild(lis[0].cloneNode(true))
        var lis1 = document.querySelectorAll('.bbb>li')
        // console.log(lis1);
        // 为 ul 自动添加 width
        var pos = bbb.children[0].offsetWidth;
        bbb.style.width = lis1.length * pos + 'px'


        // 给每个 li 添加 index
        for (var i = 0; i < lis1.length; i++) {
            lis1[i].setAttribute('index', i)

            // var idx = this.getAttribute('index')

        }
        // 创建小圆点 添加 索引号
        for (var i = 0; i < lis.length; i++) {
            var li = document.createElement('li')
            li.setAttribute('aclict', i)
            // 小圆点事件
            li.onmousemove = function () {
                var act = this.getAttribute('aclict')
                console.log(act);
                getAnim(bbb, -act * pos, 10)
                // 先清除 原有样式
                document.querySelector('.ccc>li.actColor').classList.remove('actColor')
                this.classList.add('actColor')

                // 解决 小圆点 与 L R序号不统一
                num = act
                num1 = act
            }
            ccc.appendChild(li)
        }
        // 添加 初始样式
        ccc.children[0].setAttribute('class', 'actColor')


        // 标记图片
        var num = 0;
        var num1 = 0;
        var flag = 1;
        var lis2 = document.querySelectorAll('.ccc>li')
        R.onclick = function () {

            if (flag) {
                flag = 0;
                // 轮播思想 当为最后一张图片时 ,不发生动画快速跳转到最后一张
                // 判断 是否是最后一张 图片
                if (num == lis1.length - 1) {
                    num = 0;
                    bbb.style.left = 0
                }
                num++;
                getAnim(bbb, -num * pos, 10, function () {
                    flag = 1
                })

                num1++;
                if (num1 == lis2.length) {
                    num1 = 0;
                }
                document.querySelector('.ccc>li.actColor').classList.remove('actColor')
                document.querySelectorAll('.ccc>li')[num1].classList.add('actColor')
            }


        };
        L.onclick = function () {
            if (flag) {
                flag = 0;
                // console.log(lis1.length);
                if (num == 0) {
                    num = lis1.length - 1;
                    bbb.style.left = -num * pos + 'px'
                }
                num--;
                getAnim(bbb, -num * pos, 10, function () {
                    flag = 1;
                })

                num1--;
                if (num1 == -1) {
                    num1 = lis2.length - 1;
                }

                console.log(num1);
                document.querySelector('.ccc>li.actColor').classList.remove('actColor')
                document.querySelectorAll('.ccc>li')[num1].classList.add('actColor')
            }


        };
        var timer = setInterval(function () {
            R.onclick()
        }, 2000)

    </script>
</body>

</html>